<template>
    <div class="mainPadding p-t">
        <div class="max-w">
        <div class="flex flex-j-s">
            <div class="font-Breadcrumbs"></div>
            <el-breadcrumb separator="|">
                <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i" @click="goList(item,i)" class="cursor-p">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 分享交流 -->
        <div class="MarT withFull" v-if="module_list[0].show">
            <Card1 title="分享交流" :more="true" @moreClick="more(module_list[0].id,'分享交流')">
                <template v-slot:main1>
                    <div style="height:560px ;">
                        <el-row :gutter="20">
                            <el-col :span="16" @click="goInfo(fxjl_list.length>0?fxjl_list[0]:{},'分享交流')">
                                <div class="border-r6" style="height: 465px;">
                                    <imgView :src="fxjl_list.length>0&&fxjl_list[0].thumb"></imgView>
                                </div>
                                <div style="margin-top:26px">
                                    <div class="font-title font-text-al-l omit">企业嘉宾简介：{{ fxjl_list.length>0?fxjl_list[0].blurb:'' }}</div>
                                    <div class="font-title font-text-al-l MarT12 omit">主题：{{ fxjl_list.length>0?fxjl_list[0].name:'' }}</div>
                                    <!-- <div class="font-title font-text-al-l MarT12">内容简介：</div>
                                    <div class="font-content font-MTop12 font-text-al-l omit-2 MarT12">
                                        {{ fxjl_list.length>0&&fxjl_list[0].blurb }}
                                    </div> -->
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div style="height: 50%;" @click="goInfo(fxjl_list.length>1?fxjl_list[1]:{},'分享交流')">
                                    <div class="border-r6" style="height:200px ;">
                                        <imgView :src="fxjl_list.length>1&&fxjl_list[1].thumb"></imgView>
                                    </div>
                                    <div style="margin-top:12px">
                                        <div class="font-title font-text-al-l omit">企业嘉宾简介：{{ fxjl_list.length>1?fxjl_list[1].blurb:'' }}</div>
                                        <div class="font-title font-text-al-l MarT12 omit">主题：{{ fxjl_list.length>1?fxjl_list[1].name:'' }}</div>
                                        <!-- <div class="font-content font-MTop12 font-text-al-l omit MarT12">
                                            {{ fxjl_list.length>1&&fxjl_list[1].blurb }}
                                        </div> -->
                                    </div>
                                </div>
                                <div class="MarT12" style="height: 50%;" @click="goInfo(fxjl_list.length>2?fxjl_list[2]:{},'分享交流')">
                                    <div class="border-r6" style="height:200px ;">
                                        <imgView :src="fxjl_list.length>1&&fxjl_list[2].thumb"></imgView>
                                    </div>
                                    <div style="margin-top:12px">
                                        <div class="font-title font-text-al-l omit">企业嘉宾简介：{{ fxjl_list.length>2?fxjl_list[2].blurb:'' }}</div>
                                        <div class="font-title font-text-al-l MarT12 omit">主题：{{ fxjl_list.length>2?fxjl_list[2].name:'' }}</div>
                                        <!-- <div class="font-content font-MTop12 font-text-al-l omit MarT12">{{ fxjl_list.length>2&&fxjl_list[2].blurb }}</div> -->
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="(item,i) in fxjl_lists" :key="i">
                                <div class="MarT12" style="height: 50%;" @click="goInfo(item,'分享交流')">
                                    <div class="border-r6 shadow-1" style="height: 160px;">
                                        <img v-if="item.thumb" :src="proxy.$api.prefix_img+item.thumb" alt="" class="ad-img">
                                        <el-empty v-if="!item.thumb" :image-size="50" description="暂无图片"  />
                                    </div>
                                    <div style="margin-top:12px">
                                        <div class="font-title font-text-al-l omit">企业嘉宾简介：{{ item.blurb }}</div>
                                        <div class="font-title font-text-al-l MarT12 omit-2">主题：{{ item.name }}</div>
                                        <!-- <div class="font-content font-MTop12 font-text-al-l omit-3 MarT12">{{ item.cont }}</div> -->
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </Card1>
        </div>
        <div class="MarT border-r6 back-fff ad8view">
            <TitleView class="MarT35" title="历届成果报告"></TitleView>
            <div class="MarT35" v-loading="!ljcg_list">
                <el-row :gutter="20">
                    <el-col :span="8" v-for="(item,i) in ljcg_list" :key="i" @click="goBook(item)"> 
                        <div style="height: 198px;padding: 0 38px;">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div style="height: 198px;">
                                        <img class="img_cover" :src="proxy.$api.prefix_img+item.cover" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="flex flex-j-s p-t" style="flex-direction: column;height: 100%;">
                                        <div class="font-title font-text-al-l omit-5">{{ item.title }}</div>
                                        <div class="btn-1">立即购买</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 视频课堂 -->
        <div class="MarT withFull" v-if="module_list[1].show">
            <Card1 title="视频课堂" :more="true" @moreClick="more(module_list[1].id,'视频课堂')">
                <template v-slot:main1>
                    <div class="withFull" style="height: 232px;">
                        <myEmpty description="" v-if="!spkt_list||spkt_list.length==0" />
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="(item,i) in spkt_list" :key="i" style="margin-bottom: 20px;" @click="goInfo(item,'视频课堂')">
                                <div class="MarT12" style="height: 50%;">
                                    <div class="border-r6 shadow-1 po-re" style="height: 160px;">
                                        <imgView :src="item.thumb" />
                                        <videoIcon />
                                    </div>
                                    <div style="margin-top:12px">
                                        <div class="font-title font-text-al-l omit-2">嘉宾简介：{{ item.blurb }}</div>
                                        <!-- <div class="font-title font-text-al-l MarT12">主题：{{ item.name }}</div> -->
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </Card1>
        </div>
        <!-- 广告 -->
        <div class="ad-view border-r6 MarT">
            <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
        </div>
        <div class="MarT withFull">
            <el-row :gutter="20">
                <el-col :span="16">
                    <Card1 title="言之有理" :more="true" @moreClick="more(module_list[2].id,'言之有理')" v-if="module_list[2].show">
                        <template v-slot:main1>
                            <el-row :gutter="20" style="height: 426px;">
                                <myEmpty description="" v-if="!yzyl_list||yzyl_list.length==0" />
                                <el-col :span="12" v-for="(item,i) in yzyl_list" :key="i" @click="goInfo(item,'言之有理')" style="margin-bottom: 20px;">
                                    <div class="shadow-1" style="padding: 28px 24px;">
                                        <div class="font-title font-text-al-l MarT12">{{ item.name }}</div>
                                        <div class="font-content font-MTop12 font-text-al-l omit-3 MarT35" style="min-height: 50px;">{{ item.blurb }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </template>
                    </Card1>
                </el-col>
                <el-col :span="8">
                    <Card1 title="点击排行榜" :more="false" @moreClick="more(4)" border="border-bottom:1px solid #fbb8b4;" style="border:1px solid #fbb8b4;border-radius:6px;height: 100%;">
                        <template v-slot:main>
                            <div style="height: 405px;">
                                <myEmpty description="" v-if="!ydtj_list||ydtj_list.length==0" />
                                <div v-for="(item,i) in ydtj_list" :key="i" class="widthFull MarT cursor-p" @click="goInfo(item,'点击排行榜')">
                                    <el-row :gutter="20">
                                        <el-col :span="2"><div class="bjview" style="text-align:center;">{{ i+1 }}</div></el-col>
                                        <el-col :span="22"><div class="omit font-text-al-l">{{ item.name }}</div></el-col>
                                    </el-row>
                                </div>
                            </div>
                        </template>
                    </Card1>
                </el-col>
            </el-row>
        </div>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import Card1 from '../components/card1.vue';
import TitleView from '../components/title.vue';
import FrameView from '../components/frame.vue';
import videoIcon from '../components/icon/video.vue';
import { useStore } from 'vuex';
const store = new useStore();
    // 原始模块
    const module_list = ref([
        {id:11,name:'分享交流',show:false},
        {id:12,name:'视频课堂',show:false},
        {id:13,name:'言之有理',show:false},
        {id:-1,name:'点击排行榜',show:false},
    ])
    // 导航下对应模块
    const list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
    // 面包屑
    const breadcrumb_list = list_children
    // 子栏目跳转
    const goList=(item,i)=>{
        Router.push({
            path:'/inn/list',
            query:{
            ob:proxy.$comJs.encry({
                title:item.name,
                i:i,
                titleList:list_children
            })
            }
        });
    }
    // 广告
    const ad_list1 = ref([])
    const getAd=()=>{
        proxy.$comJs.getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id,0,function(res){
            var list1 = [],list2=[],list3=[],list4=[],list5=[]
            res.list.map((item)=>{
                if(item.nid == 13){
                    list1.push(item)
                }
            })
            ad_list1.value = list1.length>0?list1:[]

        })
    }
    getAd()
    // 点击排行榜
    const ydtj_list =ref([])
    const getydtj_list=()=>{
        const id = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id
        proxy.$http.request(proxy.$api.rankList+'?nextTag=0&nid='+id+'&pageSize=10&rankTag=1','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    ydtj_list.value = res.data.data.list
                } 
            }
        })
    }
    getydtj_list()
    // 分享交流1
    const fxjl_list =ref([])
    const fxjl_lists =ref([])
    const getfxjl_list=()=>{
        const id = module_list.value[0].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=7&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    fxjl_list.value = res.data.data.list
                    if(res.data.data.list.length>3){
                        res.data.data.list.map((item,i)=>{
                            if(i>2){
                                fxjl_lists.value.push(item)
                            }
                        })
                    }
                } 
            }
        })
    }
    // 历届成果展示
    const ljcg_list = ref(null)
    const getljcg_list=()=>{
        proxy.$http.request(proxy.$api.classlist+'?ty=2','get',{},false, function (res) {
            if(res&&res.data){
                const id = proxy.$comJs.extract(res.data.data.list,'成果报告','name')[0].id
                proxy.$http.request(proxy.$api.list_book_list+'?nextTag=0&pageSize=3&prevTag=0&cateId='+id,'get',{},false, function (res) {
                    if(res&&res.data){
                        ljcg_list.value = res.data.data.list?res.data.data.list:[]
                    }
                })
            }
        })
        
    }
    getljcg_list()
    // 视频课堂
    const spkt_list = ref([
        {title:'历届成果展示历届成果展示历届成果展示',img: 'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'历届成果展示历届成果展示历届成果展示',img: 'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'历届成果展示历届成果展示历届成果展示',img: 'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
    ])
    const getspkt_list=()=>{
        const id = module_list.value[1].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=4&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    spkt_list.value = res.data.data.list
                } 
            }
        })
    }
    // 言之有理
    const yzyl_list =ref([])
    const getyzyl_list=()=>{
        const id = module_list.value[2].id
        proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=4&prevTag=0','get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.data.list!= undefined){
                    yzyl_list.value = res.data.data.list
                } 
            }
        })
    }
    // 页面模块权限
  const seek=(id)=>{
    var flag = false
    list_children.map((item)=>{
      if(item.id == id){
        flag = true
      }
    })
    return flag
  }
  const sort_module=()=>{
    module_list.value.map((item,i)=>{
      item.show = seek(item.id)
      if(item.id == 11&&seek(item.id)){
        getfxjl_list()
      }
      if(item.id == 12&&seek(item.id)){
        getspkt_list()
      }
      if(item.id == 13&&seek(item.id)){
        getyzyl_list()
      }
    })
  }
  sort_module()
  const more =(id,title)=>{
    Router.push({
        path:'/animatedly/list',
        query:{
          ob:proxy.$comJs.encry({
            title:title,
            id:id,
            first_title:'创新大课堂',
          })
        }
    });
  }
  const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info',
        query:{
            ob:proxy.$comJs.encry({
                title:name,
                id:item.newsId,
                path:'/animatedly/list',
                first_title:'创新大课堂',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
  }
  const goBook=(item)=>{
        Router.push({
            path:'/ach/i4',
            query:{
                title:item.title,
                newsId:item.bookId
            }
        });
    }
</script>

<style lang="less" scoped>
    .bjview{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 8px;
        line-height: 20px;
        background: #d10b00;
    }
    .ad8view{
        height: 341px;background: url('@/assets/img/ad8.png');background-size: 100% 100%;
    }
</style>